<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bible</title>
    <link rel="stylesheet" href="assets/iview/styles/main.css">
    <script src="assets/vue/vue.min.js"></script>
    <script src="assets/iview/iview.min.js"></script>
    <style>
        body {
            position: static;
        }
        .ivu-article h3{
            cursor: pointer;
        }
        .wrapper-header-nav-list span {
            display: inline-block;
        }

        .wrapper-header-nav-list .ivu-input-number {
            width: 60px;
        }
        .wrapper-header-nav-search .ivu-input{
            font-size: 14px;
            border-radius:0px;
            border-left: none;
            border-top: none;
            border-right: none;
        }
        .wrapper-header-nav-search .ivu-input:focus{
            box-shadow:none !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrapper">
            <div class="wrapper-header">
                <div class="ivu-menu ivu-menu-light ivu-menu-horizontal">
                    <div class="wrapper-header-nav">
                        <a href="/" class="wrapper-header-nav-logo router-link-active"><img src="assets/images/logo.png"></a>
                        <div class="wrapper-header-nav-search">
                            <i-input v-model="keyword" v-on:on-enter="onSearch" placeholder="搜索..."></i-input>
                        </div>
                        <div class="wrapper-header-nav-list">
                            <span>
                                <i-select clearable="true" v-bind:placeholder="book.Name" filterable remote v-on:on-change="onSelectBook">
                                    <i-option v-for="item in Catalog" :value="item.Id" :key="item.Id">{{item.PinYin}}-{{item.Name}}</i-option>
                                </i-select>
                            </span>
                            <span>
                                <input-number :max="book.Chapter" :min="1" v-model="chapterId" v-on:on-change="onChangeChapter"></input-number>
                            </span>
                            <span>
                                <input-number :min="0" v-model="verseStart" v-on:on-change="onChangeVerse"></input-number>
                            </span>
                            <span>
                                <input-number v-model="verseEnd" v-on:on-change="onChangeVerse"></input-number>
                            </span>
                            <i-button type="success" icon="play" v-on:click="onPlayVerse">播放</i-button>
                            <button-group>
                                <i-button type="primary" icon="plus" v-on:click="onIncrease"></i-button>
                                <i-button type="primary" icon="mouse" v-on:click="onScroll"></i-button>
                                <i-button type="primary" icon="minus" v-on:click="onLessen"></i-button>
                            </button-group>
                            <dropdown  v-on:on-click="onToolBarClick">
                                <i-button type="primary">
                                    其它功能
                                    <icon type="arrow-down-b"></icon>
                                </i-button>
                                <dropdown-menu slot="list">
                                    <dropdown-item name="肃静">肃静</dropdown-item>
                                    <dropdown-item name="圣餐">圣餐</dropdown-item>
                                    <dropdown-item name="关机">关机</dropdown-item>
                                    <dropdown-item name="通知">通知</dropdown-item>
                                    <dropdown-item name="赞美诗">赞美诗</dropdown-item>
                                    <dropdown-item name="引用经文">引用经文</dropdown-item>
                                    <dropdown-item name="查看引用">查看引用</dropdown-item>
                                    <dropdown-item name="清空引用">清空引用</dropdown-item>
                                    <dropdown-item divided name="关闭">关闭</dropdown-item>
                                </dropdown-menu>
                            </dropdown>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper-container">
                <div class="ivu-row">
                    <div class="wrapper-navigate ivu-col ivu-col-span-3">
                        <div data-v-2a8bce2a="" class="navigate">
                            <i-menu :theme="theme" :active-name="bookId" width="auto" :open-names="['old']" v-on:on-select="onSelectBook">
                                <submenu name="old">
                                    <template slot="title">
                                        <icon type="ios-paper"></icon>
                                        旧约
                                    </template>
                                    <template v-for="(item, index) in oldTestamentCatalog">
                                        <menu-item v-bind:name="item.Id">{{item.Name}}</menu-item>
                                    </template>
                                </submenu>
                                <submenu name="new">
                                    <template slot="title">
                                        <icon type="ios-paper"></icon>
                                        新约
                                    </template>
                                    <template v-for="(item, index) in newTestamentCatalog">
                                        <menu-item v-bind:name="item.Id">{{item.Name}}</menu-item>
                                    </template>
                                </submenu>
                            </i-menu>
                        </div>
                    </div>
                    <div class="ivu-col ivu-col-span-21">
                        <div class="wrapper-content ivu-article">
                            <article>
                                <h1 v-cloak v-if="keyword"><span>查询-{{keyword}}</span></h1>
                                <h1 v-cloak v-else>
                                    <span>{{book.Name}} 第{{chapterId}}章</span>
                                    <span v-if="verseStart">
                                    第{{verseStart}}<span v-if="verseEnd">至{{verseEnd}}</span>节
                                    </span>
                                </h1>
                                <div id="verse">
                                    <h3 v-cloak v-for="item in verses">{{item.Verse}}{{item.Scripture}}</h3>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-main">
                <h4>&copy; 2017</h4>
            </div>
        </div>
        <div class="catalogue">
            <div class="ivu-card ivu-card-dis-hover ivu-card-shadow">
                <div class="ivu-card-body">
                    <div class="catalogue-title">目录</div>
                    <div class="catalogue-content">
                        <template v-for="index in book.Chapter">
                            <span v-on:click="onChangeChapter(index)">{{index}}</span>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <back-top></back-top>
        <modal v-model="hymnModel" title="打开赞美诗" cancel-text="取消" ok-text="确定" @on-ok="onPlayHymn">
            <i-select v-model="hymn" clearable="true" placeholder="文件名" filterable remote>
                <i-option v-for="item in hymns" :value="item">{{item}}</i-option>
            </i-select>
        </modal>

        <modal :mask-closable="false" v-model="editorModel" title="图文编辑器" cancel-text="取消" ok-text="确定" @on-ok="onPlayEditor">
            <div id="editor" width="360">

            </div>
        </modal>
    </div>
    <script src="assets/bible/Catalog.js"></script>
    <script src="assets/bible/Bible.js"></script>
    <script src="assets/js/hymn.js"></script>
    <script src="assets/js/nw.js"></script>
    <script type="text/javascript" src="assets/editor/wangEditor.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>